<template>
	<el-row class="container">
		<el-col :span="24" class="header">
			<el-col :span="10" class="logo" :class="collapsed?'logo-collapse-width':'logo-width'">
				{{collapsed?'':sysName}}
			</el-col>
			<el-col :span="10" style="display: flex;align-items: center">
				<div class="tools" @click.prevent="collapse">
					<i class="fa fa-align-justify"></i>
				</div>
<!--				<el-button type="primary" class="header-btn" @click.prevent="navTo(1)">活动报名</el-button>-->
<!--				<el-button type="primary" class="header-btn active" >合同管理</el-button>-->
<!--				<el-button type="primary" class="header-btn" @click.prevent="navTo(2)">仓库系统</el-button>-->
<!--				<el-button type="primary" class="header-btn" @click.prevent="navTo(3)">系统配置</el-button>-->
				<el-button type="primary" :class="['header-btn',{'active': item.id===2}]" v-for="item in appList" :key="item.id" @click.prevent="navTo(item)">{{ item.name }}</el-button>
			</el-col>
			<el-col :span="4" class="userinfo">
				<el-dropdown trigger="hover">
					<span class="el-dropdown-link userinfo-inner"><img :src="this.sysUserAvatar" /> {{sysUserName}}</span>
					<el-dropdown-menu slot="dropdown">
						<el-dropdown-item>我的消息</el-dropdown-item>
						<el-dropdown-item @click.native="setting">设置</el-dropdown-item>
						<el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
			</el-col>
		</el-col>
		<el-col :span="24" class="main">
			<aside :class="collapsed?'menu-collapsed':'menu-expanded'">
				<!--导航菜单-->
				<el-menu :default-active="$route.path" class="el-menu-vertical-demo aw" @open="handleopen" @close="handleclose" @select="handleselect"
					 unique-opened router v-show="!collapsed">
					<template v-for="(item,index) in $router.options.routes" v-if="!item.hidden">
						<el-submenu :index="index+''" v-if="!item.leaf">

							<template slot="title"><i :class="item.iconCls"></i>{{item.name}}</template>
<!--							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}<span>{{ child.meta }}</span></el-menu-item>-->
							<el-menu-item v-for="child in item.children" :index="child.path" :key="child.path" v-if="!child.hidden">{{child.name}}<span></span></el-menu-item>
						</el-submenu>
						<el-menu-item v-if="item.leaf&&item.children.length>0" :index="item.children[0].path"><i :class="item.iconCls"></i>{{item.children[0].name}}</el-menu-item>
					</template>
				</el-menu>
				<!--导航菜单-折叠后-->
				<ul class="el-menu el-menu-vertical-demo collapsed" v-show="collapsed" ref="menuCollapsed">
					<li v-for="(item,index) in $router.options.routes" v-if="!item.hidden" class="el-submenu item">
						<template v-if="!item.leaf">
							<div class="el-submenu__title" style="padding-left: 20px;" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)"><i :class="item.iconCls"></i></div>
							<ul class="el-menu submenu" :class="'submenu-hook-'+index" @mouseover="showMenu(index,true)" @mouseout="showMenu(index,false)">
								<li v-for="child in item.children" v-if="!child.hidden" :key="child.path" class="el-menu-item" :class="$route.path==child.path?'is-active':''" @click="$router.push(child.path)">{{child.name}}</li>
							</ul>
						</template>
						<template v-else>
							<li class="el-submenu">
								<div class="el-submenu__title el-menu-item" style="padding-left: 20px;height: 56px;line-height: 56px;padding: 0 20px;" :class="$route.path==item.children[0].path?'is-active':''" @click="$router.push(item.children[0].path)"><i :class="item.iconCls"></i></div>
							</li>
						</template>
					</li>
				</ul>
			</aside>
			<section class="content-container">
				<div class="grid-content bg-purple-light">
					<el-col :span="24" class="breadcrumb-container">
<!--						<strong class="title">{{$route.name}}&nbsp;&nbsp;&nbsp;<span v-if="$route.name==='会员管理'">总数: <em>{{memberTotalNumber}}</em></span></strong>-->
						<strong class="title">{{$route.name}}&nbsp;&nbsp;&nbsp;<span v-if="$route.name==='会员管理'"></span></strong>
						<el-breadcrumb separator="/" class="breadcrumb-inner">
							<el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
								{{ item.name }}
							</el-breadcrumb-item>
						</el-breadcrumb>
					</el-col>
					<el-col :span="24" class="content-wrapper">

						<transition name="fade" mode="out-in">
							<router-view></router-view>
						</transition>
					</el-col>
				</div>
			</section>
		</el-col>
	</el-row>
</template>

<script>
	import { getRules } from '../api/permissionApi'
	// import { getMemberList } from '../api/api';
	// const defaultuser = require('../assets/users.jpg')
	const defaultuser = require('../assets/icon_1.png')
	import { logout } from "../api/userAPI"
	export default {
		data() {
			return {
				memberTotalNumber: '',
				sysName:'LAIMALAIBA',
				collapsed:false,
				sysUserName: '',
				sysUserAvatar: '',
				isShowTotalNum: this.$util.id,
				form: {
					name: '',
					region: '',
					date1: '',
					date2: '',
					delivery: false,
					type: [],
					resource: '',
					desc: ''
				},
				appList: []
			}
		},
		// watch: {
		// 	//监听路由
		// 	$route: {
		// 		handler: function (val, oldVal) {
		// 			//获取路由参数
		// 			let _urlParams = this.$route.params;
		// 			//先清空搜索字段（this.keyFrom）所有属性的值
		// 			for (let key in this.keyFrom) {
		// 				this.keyFrom[key] = null
		// 			}
		// 			//如果路由参数存在，并且参数含有status。
		// 			if (_urlParams && _urlParams.status) {
		// 				console.log(this.$route);
		// 			}
		//
		// 		},
		// 		//深度观察监听
		// 		deep: true
		// 	}
		// },
		methods: {
			async _getRules() {
				const res = await getRules()
				console.log(res)
				this.appList = res.data.applist
			},
			setting() {
				// this.$router.push('/setting')
				console.log('setting')
			},
			onSubmit() {
				console.log('submit!');
			},
			handleopen() {
				// console.log('handleopen');
			},
			handleclose() {
				// console.log('handleclose');
			},
			handleselect: function (a, b) {
			},
			//退出登录
			logout: function () {
				let _this = this;
				this.$confirm('确认退出吗?', '提示', {
					//type: 'warning'
				}).then(() => {
					logout().then((res) => {
						sessionStorage.removeItem('user')
						if (res.code === 0) {
							_this.$router.push('/login')
						}
						console.log(res)
					})
				}).catch(() => {

				});
			},
			//折叠导航栏
			collapse:function(){
				this.collapsed=!this.collapsed;
			},
			showMenu(i,status){
				this.$refs.menuCollapsed.getElementsByClassName('submenu-hook-'+i)[0].style.display=status?'block':'none';
			},
			isShowMemberTotalNum() {
				// console.log(this.$util.getUrlParam('id'))
				alert(111)
			},
			navTo(item) {
				// if (index === 1) {
				// 	window.location.href = 'https://mobile.laiba.shop/adminexp/#/Allinfo'
				// } else if (index === 2) {
				// 	window.location.href = 'https://mobile.laiba.shop/warehouse/#/Allinfo'
				// }else if (index === 3) {
				// 	window.location.href = 'https://mobile.laiba.shop/system/#/city'
				// }

				if (item.id === 2) return
				window.location.href = item.url
			},
		},
		created() {
			this._getRules() // 获取顶部按钮权限
			let user = sessionStorage.getItem('user');
			if (user) {
				user = JSON.parse(user);
				this.sysUserName = user.username;
				this.sysUserAvatar = user.avatar || defaultuser;
				// this.sysUserName = user.name || '暂无信息';
				// this.sysUserAvatar = user.avatar || defaultuser;
			}
		}
	}

</script>

<style scoped lang="scss">
	@import '~scss_vars';
	.header-btn {
		background-color: #00497f;
		border-color: #fff;
		height: 50%
	}
	.active {
		color: #00497f;
		background-color: #fff;
		border-color: #fff;
		height: 50%
	}
	.container {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		.header {
			height: 60px;
			line-height: 60px;
			background: $color-primary;
			color:#fff;
			.userinfo {
				text-align: right;
				padding-right: 35px;
				float: right;
				.userinfo-inner {
					cursor: pointer;
					color:#fff;
					img {
						width: 40px;
						height: 40px;
						border-radius: 20px;
						margin: 10px 0 10px 10px;
						float: right;
					}
				}
			}
			.logo {
				//width:230px;
				height:60px;
				font-size: 22px;
				padding-left:20px;
				padding-right:20px;
				border-color: rgba(238,241,146,0.3);
				border-right-width: 1px;
				border-right-style: solid;
				img {
					width: 40px;
					float: left;
					margin: 10px 10px 10px 18px;
				}
				.txt {
					color:#fff;
				}
			}
			.logo-width{
				width:230px;
			}
			.logo-collapse-width{
				width:60px
			}
			.tools{
				padding: 0 23px;
				width:14px;
				height: 60px;
				line-height: 60px;
				cursor: pointer;
			}
		}
		.main {
			display: flex;
			position: absolute;
			top: 60px;
			bottom: 0;
			overflow: auto;
			aside {
				flex:0 0 230px;
				width: 230px;
				.el-menu{
					height: 100%;
					.el-submenu [class^=el-icon-]{
						text-align: left;
					}
				}
				.collapsed{
					width:60px;
					.item{
						position: relative;
					}
					.submenu{
						position:absolute;
						top:0;
						left:60px;
						z-index:99999;
						height:auto;
						display:none;
						border: 1PX SOLID #e5e5e5;
						border-radius: 5PX;
					}

				}
			}
			.menu-collapsed{
				flex:0 0 60px;
				width: 60px;
			}
			.menu-expanded{
				flex:0 0 230px;
				width: 230px;
				ul {
					li {
						i {
							font-size: 14px;
							display: inline-block;
							width: 20px;
							height: 14px;
						}
					}
				}
			}
			.aw{
				width: auto !important;
			}
			.content-container {
				flex:1;
				overflow-y: scroll;
				padding: 20px;
				.breadcrumb-container {
					.title {
						width: 200px;
						float: left;
						color: #475669;
						font-size:16px;
						span {
							font-size: 14px;
							font-weight: normal;
						}
						em {
							font-style: normal;
							color: #ff3912;
							font-weight: 700;
						}
					}
					.breadcrumb-inner {
						float: right;
					}
				}
				.content-wrapper {
					background-color: #fff;
					box-sizing: border-box;
					margin-top:5px;
				}
			}
		}
	}

</style>
